{
    let list = [
        document.querySelector('.username input'),
        document.querySelector('.email_address input'),
        document.querySelector('.password input'),
        document.querySelector('.password_again input')
    ];
    let listf = [
        document.querySelector('.username'),
        document.querySelector('.email_address'),
        document.querySelector('.password'),
        document.querySelector('.password_again')
    ];
    let notice = [
        document.querySelector('#a1 h3'),
        document.querySelector('#a2 h3'),
        document.querySelector('#a3 h3')
    ];
    let notice4 = [
        document.querySelector('#a2 h4'),
        document.querySelector('#a3 h4'),
        document.querySelector('#a4 h4')
    ];
    let wti_can_register = false;
    let Register = document.querySelector('.Register');
    function wti() {
        if (!wti_can_register) {
            Register.disabled = true;
            Register.style.pointerEvents = 'none';
            Register.style.opacity = '0.5';
        } else {
            Register.disabled = false;
            Register.style.pointerEvents = '';
            Register.style.opacity = '';
        }
    }
    function isElementVisible(element) {
        return element && window.getComputedStyle(element).display !== 'none';
    }
    function check() {
        wti_can_register = false;
        if (isElementVisible(Register)) {
            if (list[2].value !== '' && list[2].value == list[3].value) {
                const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                if (regex.test(list[1].value)) {
                    if (list[2].value.length >= 6 && list[2].value.length <= 20) {
                        wti_can_register = true;
                    }
                }
            }
        }
        wti();
    }
    const throttleTime = 500;
    setInterval(() => {
        check();
    }, throttleTime);
    list.forEach(function (element, index) {
        function handleMouseEnter(event) {
            listf[index].style.borderColor = 'rgb(0, 145, 255)';
        }
        function handleMouseOut(event) {
            listf[index].style.borderColor = '';
        }
        function handleClick(event) {
            listf[index].style.borderColor = 'rgb(0, 145, 255)';
            element.removeEventListener('mouseout', handleMouseOut);
            element.addEventListener('blur', handleBlur);
        }
        function handleBlur(event) {
            if (list[2].value !== '') {
                if (list[2].value != list[3].value) {
                    notice4[2].style.display = 'flex';
                }
                else {
                    notice4[2].style.display = 'none';
                }
            }
            if (element.value === "") {
                if (index != 0 && index != 3) {
                    notice4[index - 1].style.display = 'none';
                }
                if (index == 3) {
                    listf[index].style.borderColor = '';
                }
                if (index != 3) {
                    listf[index].style.borderColor = 'rgb(255, 0, 0)';
                    notice[index].style.display = 'flex';
                }
                element.removeEventListener('mouseenter', handleMouseEnter);
            } else {

                listf[index].style.borderColor = '';
                if (index != 3) {
                    notice[index].style.display = 'none';
                }
                switch (index) {
                    case 1:
                        const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
                        if (!regex.test(element.value)) {
                            notice4[0].style.display = 'flex';
                        }
                        else {
                            notice4[0].style.display = 'none';
                        }
                        break;
                    case 2:
                        if (element.value.length >= 6 && element.value.length <= 20) {
                            notice4[1].style.display = 'none';
                        }
                        else {
                            notice4[1].style.display = 'flex';
                        }
                        break;
                    default:
                        break;
                }
                element.addEventListener('mouseenter', handleMouseEnter);
                element.addEventListener('mouseout', handleMouseOut);
            }
            element.removeEventListener('blur', handleBlur);
        }
        element.addEventListener('mouseenter', handleMouseEnter);
        element.addEventListener('mouseout', handleMouseOut);
        element.addEventListener('click', handleClick);
    });
}